<template>
  <div class="form-item-el">
    <div v-if="mode === 'DESIGN'">
      <el-input disabled :placeholder="placeholder" show-word-limit :rows="2" type="textarea" />
    </div>
    <div v-else-if="mode === 'PC' && !readonly">
      <el-input
        v-model="_value"
        clearable
        :disabled="$attrs.disabled"
        :maxlength="255"
        :placeholder="placeholder"
        :autosize="{ minRows: 3 }"
        show-word-limit
        type="textarea"
      ></el-input>
    </div>
    <div v-else>
      {{ _value }}
    </div>
  </div>
</template>

<script setup>
import { computed, getCurrentInstance } from "vue";
import { isEmpty } from "lodash";

const { proxy } = getCurrentInstance();
const props = defineProps({
  modelValue: {
    type: String,
    default: ""
  },
  placeholder: {
    type: String,
    default: "请输入内容"
  },
  mode: {
    type: String,
    default: "DESIGN"
  },
  required: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(["update:modelValue"]);
const _value = computed({
  get: () => {
    return props.modelValue;
  },
  set: val => emit("update:modelValue", val)
});

if (isEmpty(_value.value) && !proxy.$attrs.disabled) {
  _value.value = proxy.$attrs.defaultValue;
}
</script>

<style scoped></style>
